<!--
 * @Descripttion: 角色关联功能清单
 * @Author: YuZhenJing
 * @Date: 2020-01-15 09:58:45
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:33:47
 -->
<template>
  <div class="role-menu-points">
    <tf-drawer :footerShow="true" :title="title" :visible.sync="tfVisible">
      <template v-slot:content>
        <div
          style="padding:10px;height:calc(100vh - 145px);overflow-y:auto "
          v-if="funPointsList.length != 0"
        >
          <div :key="points.funPointsCode" v-for="points in funPointsList">
            <transition mode="out-in" name="fade-transform">
              <el-card class="point-card" shadow="hover">
                <span v-text="points.funPointsName"></span>
                <el-switch
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  style="float: right; padding: 3px 0"
                  v-model="points.checked"
                ></el-switch>
              </el-card>
            </transition>
          </div>
        </div>
        <div style="padding:10px;" v-else>
          <el-card
            class="text-h5"
            shadow="never"
            style="height:calc(100vh - 75px);text-align:center;line-height:100px"
            >当前菜单未设置功能点</el-card
          >
        </div>
      </template>
      <template v-if="funPointsList.length != 0" v-slot:footer>
        <el-row>
          <el-col
            :span="24"
            style="text-align:center;height:60px;line-height:60px;"
          >
            <el-button
              :loading="butLoading"
              @click="restorePointsDefaults"
              icon="el-icon-refresh-left"
              type="primary"
              >默认值</el-button
            >
            <el-button
              :loading="butLoading"
              @click="confirmRolePoints"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >确认选择</el-button
            >
          </el-col>
        </el-row>
      </template>
    </tf-drawer>
  </div>
</template>
<script>
export default {
  components: {
    'tf-drawer': require('@/components/common/drawer/TfDrawer').default
  },
  data() {
    return {
      tfVisible: false,
      title: '功能点',
      funListCode: '',
      roleId: '',
      funPointsList: [],
      butLoading: false
    }
  },
  methods: {
    show(funData, roleId, alreadyChecked) {
      if (funData && funData.funListCode != '') {
        if (roleId) {
          this.funListCode = funData.funListCode
          this.roleId = roleId
          this.title = '【' + funData.funListName + '】功能点'
          this.getMenuPointsData(alreadyChecked)
          this.tfVisible = true
        } else {
          this.$alert('角色编码不能为空，无法进入功能点管理', '提示', {
            type: 'warning',
            confirmButtonText: '确定'
          })
        }
      } else {
        this.$alert('功能清单编码不能为空，无法进入功能点管理', '提示', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      }
    },
    //根据功能清单编号获取功能点信息
    getMenuPointsData(alreadyChecked) {
      this.funPointsList = []
      const resultData = this.$html.get(
        'roleFun/menuPointsData/' + this.funListCode
      )
      resultData
        .then(data => {
          if (data.returnType == 'success') {
            data.returnData.map(item => {
              // 初始化选择状态
              item.checked = false
              this.funPointsList.push(item)
            })
            this.getRoleFunPointsCode(alreadyChecked)
          }
        })
        .catch(() => {
          console.log('error:roleMenuPoints/getMenuPointsData')
        })
    },
    //根据角色ID,功能清单编码获取功能点编码
    getRoleFunPointsCode(alreadyChecked) {
      if (alreadyChecked && alreadyChecked.length != 0) {
        //此功能已选择过功能点，则使用缓存处理选中状态
        this._headlePointsChecked(alreadyChecked)
      } else {
        let params = {
          roleId: this.roleId,
          funListCode: this.funListCode
        }
        const resultData = this.$html.get('roleFun/roleFunPointsCode', params)
        resultData
          .then(data => {
            if (data.returnType == 'success') {
              let selectedValue = data.returnData
              this._headlePointsChecked(selectedValue)
            }
          })
          .catch(() => {
            console.log('error:roleMenuPoints/getRoleFunPointsCode')
          })
      }
    },
    //恢复默认值
    restorePointsDefaults() {
      this.butLoading = true
      const resultData = this.$html.get(
        'roleFun/restorePointsDefaults/' + this.funListCode
      )
      resultData
        .then(data => {
          if (data.returnType == 'success') {
            let defaultValue = data.returnData
            this._headlePointsChecked(defaultValue)
          }
          this.butLoading = false
        })
        .catch(error => {
          this.butLoading = false
          console.log('error:roleMenuPoints/restorePointsDefaults', error)
        })
    },
    //处理功能点选择状态
    _headlePointsChecked(selectedValue) {
      if (selectedValue && selectedValue.length != 0) {
        this.funPointsList.map(item => {
          selectedValue.map(selected => {
            if (selected == item.funPointsCode) {
              item.checked = true
            }
          })
        })
      }
    },
    //确认选择的功能功能点
    confirmRolePoints() {
      let selectPointCodes = []
      this.funPointsList.map(item => {
        if (item.checked) {
          selectPointCodes.push(item.funPointsCode)
        }
      })
      let funListPoints = {
        funListCode: this.funListCode,
        pointCodes: selectPointCodes
      }
      this.$emit('choicePoints', funListPoints)
      this.tfVisible = false
    }
  }
}
</script>
<style lang="stylus" scope>
.point-card
  margin-bottom 10px
</style>
